@import "functions";
@import "vars";
@import "styles";

.header-anchor {
  display: block;
  position: relative;
  top: -10vh;
}

pre {
  padding: 0.5em;
  padding-left: 1em;
}
pre code {
  line-height: 1.5;
  font-size: 0.8rem;
}

q {
  color: #09b5c4;
}

.header-image, .header-image + .post__heading {
  z-index: 0; /* make sure they are behind nav */
}
.header-image + .post__heading {
  padding-left: 1em;
  padding-right: 1em;
}

.post {
  margin: 0 auto;
}

.github-corner svg {
  position: fixed !important;
  z-index: 1000;
}

/* make sure post content isn't centered (probably should remove that default) */
.post__content {
  justify-content: initial;

  /* fix images that might not fix - compromise (text won't flow around float) */
  overflow: hidden;
}

.post__content img {
  position: inherit;
  max-width: 100%;
  width: 100vw;
}
.post__content .center-image {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  width: initial;
  height: auto;
}

.post-list__demo {
  margin-bottom: 1em
}

.post__meta {
  margin-top: 1em;
  margin-bottom: 1em;
}

.header-image + .post__heading {
  margin-top: calc(24vh);
}
.header-image {
  height: 48vh;
}
.header-image + .post__heading + .post__content {
  margin-top: 50vh;
  padding-top: 5vh;
}

@media screen and (max-width: 1150px) {
  .post__content pre {
    /* low resolutions need this */
    word-break: break-all;
  }
}

@media screen and (min-width: 1150px) {
  .post__heading {
    font-size: 54px;
  }
}

.header-extra {
  font-size: small;
  font-family: "Avenir Next", "Helvetica Neue", sans-serif;
  position: absolute;
  top: 0;
  left: 0;
  margin-top: calc(42vh);
  margin-left: calc(5vh);
  z-index: 400;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.header-extra a {
  color: #ddd;
}

.header-anchor-select {
  display: none;
  margin-left: 0.25em;
}

.header:active .header-anchor-select,
.header:hover .header-anchor-select {
  display: inline;
}

.previous-page, .next-page {
  font-family: "Avenir Next", "Helvetica Neue", sans-serif;
  text-transform: uppercase;
  text-rendering: optimizeLegibility;

  top: calc(50%);
  position: fixed;
}
.previous-page {
  left: 1em;
}
.next-page {
  right: 1em;
}

@media (max-width: 1150px) {
  .next-page, .previous-page {
    // hide next/prev on smaller resolutions for now
    border: none;
  }
}
@include media-query(portable) {
  .post__heading h1 {
    margin: 0;
  }

  .prevnext-pages {
    position: inherit;
    height: auto;
    top: auto;
    left: auto;
    right: auto;
  }

  .next-page, .previous-page {
    padding: 0.1em;
    background: white;
    top: inherit;
    bottom: 0.5em;
    max-width: 40%;

    // hide next/prev on mobile for now
    border: none;
  }

  .chapter-content {
    margin: 1em;
    padding: 0;
  }

  #disqus_thread {
    margin: 1em;
  }

  .gitter-open-chat-button {
    display: none;
  }
}

.chapter-content {
  padding: 0;

  // TODO: push to _table.scss?
  table {
    margin-top: 1em;
    margin-bottom: 1em;

    td {
      padding: 0.5em;
    }
  }
}

.gitter-chat-embed-action-bar {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start !important;
}
